<template>
    <div>
        <Modal title="购物选项" :value="value" :width="95" @on-cancel="cancel" :mask-closable="false" >
            <Button size="small" type="primary" @click="handleAddShoppingOption">添加购物选项</Button>
            <table class="minitable" v-for="(item, index) in shoppingOptions" :key="index" long mgt2>
                <tr>
                    <th v-for="(item2, index2) in model.selectedShoppingOptionParameters" :key="index2">{{item2}}</th>
                    <th>价格</th>
                    <th>库存量</th>
                    <th>起购量</th>
                    <th>限购量</th>
                    <th>奖励积分</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td v-for="(item2, index2) in model.selectedShoppingOptionParameters" :key="index2">
                        <Input v-model="item.shoppingOptionParameters[item2]" size="small" long :disabled="!item.isEditing" />
                    </td>
                    <td><InputNumber v-model="item.price" size="small" :min="0" long :disabled="!item.isEditing" /></td>
                    <td><InputNumber v-model="item.inventory" size="small" :min="0" :precision="0" long :disabled="!item.isEditing" /></td>
                    <td><InputNumber v-model="item.minLimitCount" size="small" :min="1" :precision="0" long :disabled="!item.isEditing" /></td>
                    <td><InputNumber v-model="item.maxLimitCount" size="small" :min="1" :precision="0" long :disabled="!item.isEditing" /></td>
                    <td><InputNumber v-model="item.xpValue" size="small" :min="0" :precision="0" long :disabled="!item.isEditing" /></td>
                    <td text-center w7>
                        <Button v-if="!item.isEditing" size="small" mgr1 @click="handleEdit(index)">编辑</Button>
                        <Button v-if="item.isEditing" size="small" type="primary" mgr1 @click="handleupdateShoppingOption(index)">保存</Button>
                        <Button v-if="!item.isEditing" size="small" type="error" @click="handleDeleteShoppingOption(index)">删除</Button>
                    </td>
                </tr>
                <tr>
                    <td :colspan="6+model.selectedShoppingOptionParameters.length">
                        <picture-box v-model="item.pictures" :disabled="!item.isEditing"></picture-box>
                    </td>
                </tr>
            </table>

            <div slot="footer">
                <Button @click="cancel">关闭</Button>
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import PictureBox from '@common/components/picture-box.vue';

@Component({
    components: { PictureBox }
})
export default class ShoppingOptions extends AbpBase{
    @Prop({type:Boolean,default:false}) value:boolean
    @Prop() model:any
    get commodityId() {
        return this.model.id;
    }
    handleAddShoppingOption() {
        this.shoppingOptions.push({
            commodityId: this.commodityId, 
            price: 0,
            xpValue: 0,
            inventory: 0,
            minLimitCount: 1,
            maxLimitCount: 1,
            pictures: [],
            shoppingOptionParameters: {},
            isEditing: true
        });
    }
    handleEdit(index) {
        var shoppingOption = this.shoppingOptions[index];
        shoppingOption.isEditing = true;
    }
    shoppingOptions = []
    async handleupdateShoppingOption(index) {
        var shoppingOption = this.shoppingOptions[index];
        if(!shoppingOption.id) {
            var response = await this.post('Commodity/AddShoppingOption', shoppingOption);
            if(response.success) {
                shoppingOption.id = response.id;
                shoppingOption.isEditing = false;
            }
        }else {
            var response = await this.put('Commodity/UpdateShoppingOption', shoppingOption);
            if(response.success) {
                shoppingOption.id = response.id;
                shoppingOption.isEditing = false;
            }
        }
    }
    handleDeleteShoppingOption(index) {
        var shoppingOption = this.shoppingOptions[index];
        this.confirm('确认删除该购物选项吗？', async () => {
            if(shoppingOption.id) {
                var response = await this.post('Commodity/DeleteShoppingOption', { id: shoppingOption.id });
                if(response.success) {
                    this.shoppingOptions.splice(index, 1);
                }
            }else {
                this.shoppingOptions.splice(index, 1);
            }
        });
    }
    async save(){
        let response = await this.post("Commodity/CreateCommodity", this.model);
        if(response.success) {
            this.$emit('save-success');
            this.closeModal();
        }
    }
    cancel(){
        for(var i = 0; i < this.shoppingOptions.length; i++) {
            if(this.shoppingOptions[i].isEditing) {
                this.error('有未保存的购物选项');
                return;
            }
        }
        this.closeModal();
    }
    closeModal() {
        this.$emit('input', false);
    }
    async handleGetAllShoppingOptions() {
        var response = await this.get('Commodity/GetAllShoppingOptions', { id: this.model.id });
        if(response.success) {
            this.shoppingOptions = response.result.map(elem => Object.assign({ isEditing: false }, elem));
        }
    }
    @Watch('model')
    async handleOnModelChange() {
        await this.handleGetAllShoppingOptions();
    }
}
</script>